<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta charset="UTF-8">
    <title>创建聊天</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <link rel="stylesheet" href="css/friendlistpage.css"/>
    <style>
        body,html{
            height:100%;
            overflow-y: auto;
        }
        #newsplace{
            padding-left:17px;
            padding-right:17px;
            position: absolute;
            top:44px;
            left:0;
            right:0;
            bottom:0;
            overflow-y: auto;
        }
        #newsplace img{
            width:41px;
            height:41px;

        }
        #newsplace .listplace{
            padding-top:9px;
            padding-bottom:9px;
            position: relative;
        }
        #newsplace .listplace>div{
            display:inline-block;
        }
        #newsplace .listplace>div.allchatimg{
            height:41px;
            width:41px;
            background:#DAE0E0;
        }
        #newsplace .listplace>div.allchatname{
            height:41px;
            line-height: 41px;
            position: absolute;
            left:55px;
            top:9px;
            font-size:15px;
        }
        #addallchatbtn a{
            background: url(img/addbtn01.png) no-repeat center center;
            background-size: 20px 20px;
            height:44px;
            width:44px;
            display: inline-block;
        }
        #addallchatbtn{
            position: absolute;
            top: 0;
            right: 0;
            height:44px;
            width:44px;
        }
        /*好友列表部分确定按钮*/
        #imgchoicedFDokbtn1,#titleok{
            position:absolute;
            right:0;
            top:0;
            height:44px;
            width:44px;
            color:#fff;
            line-height: 44px;
            text-align: center;
        }
        /*搜索框部分*/
        #imgchoicefriend .inputsearchbox {
            position: relative;
            z-index: 200;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
        }
        #imgchoicefriend .header_action_buttons {
            padding: 0 20px;
            line-height: 44px;
            font-size: 15px;
            color: #fff;
        }
        #imgchoicefriend .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper {
            left: 20px;
            right: 20px;
            top: 9px;
        }
        #imgchoicefriend .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper>div.mweb_lookup_bar_input {
            border: 1px solid #ddd;
            background: #fff url("img/search.png") no-repeat 8px center;
            background-size: 13px;
            height: 33px;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
        }
        #csearchbtn1{
            position: absolute;
            top: 2px;
            left: 0;
            width: 25px;
            height: 27px;
            background: transparent;
            z-index: 100;
        }
        #imgchoicefriend .mweb_lookup_bar_input>input {
            color: #999;
            position: absolute;
            left: 30px;
            box-sizing: border-box;
            width: 89%;
        }
        #imgchoicefriend .inputsearchbox>div{
            height:51px;
        }
        #csearchinput1{
            height:22px;
            line-height: 22px;
        }
        #a1 .friends{
            border-top:1px solid #DDD;
        }
        /*输入聊天主题*/
        .titleinputbox{
            padding:27px 19px 0 19px;
        }
        h1{
            color:#B2B2B2;
            font-size:15px;
            font-weight: 500;
        }
        .titleinputbox div{
            padding-top:7px;
            border-bottom:1px solid #869D73;
            padding-bottom:5px;
        }
        .titleinputbox div input{
            font-size:18px;
            color:#313131;
        }
        #allchattitlepage{
            height:100%;
            background: #fff;
        }
        #titleok.cannotclick{
            color:#77777A;
        }
        /*最后列表下划线*/
        #newsplace .ts_cells:last-child{
            border-bottom: 1px solid #ddd;
        }
        /*发起群聊等待提示部分*/
        #waitplace{
            height:100%;
            width:100%;
            background:rgba(28,29,31,0.2);
            position:absolute;
            z-index: 1000;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
        #waitplace>div{
            width:64%;
            height:80px;
            background:rgba(53,53,53,0.5);
            overflow: hidden;
            border-radius:4px ;
            margin:auto;
        }
        #waitplace>div>div:first-child{
            width:33%;
            height:80px;
            text-align: center;
            line-height: 80px;
        }
        #waitplace>div>div:first-child>img{
            width:44px;
            height:44px;
            -webkit-animation:circle 1s infinite linear;/*匀速 循环*/
        }
        @-webkit-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        #waitplace>div>div:last-child{
            height:80px;
            line-height:80px;
            font-size:18px;
            color:#fff;
        }
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="allchatpage">
<!--好友列表页-->
<div class="PageWrapper nonav" id="imgchoicefriend" style="display:block;margin-top:0;">
    <div class=" has_toolbar">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header" style="position: relative">
                <div class="header_main">
                    <button class="mweb_modal_back_button" id="friendgobackbtn"></button>
                    <div class="title page_title unified">
                        选择好友
                    </div>
                    <div class="header_action_buttons" style="height: 100%" id="imgchoicedFDokbtn1">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框-->
        <div class="inputsearchbox">
            <div >
                <div class="header_action_buttons mweb_lookup_bar_has_input">
                    <div class="mweb_lookup_bar_input_wrapper ">
                        <div class="mweb_lookup_bar_input" style="min-height: 29px;position:relative;font-size: 14px; color:#BC7F74;">
                            <div id="csearchbtn1"></div>
                            <input type="text" id="csearchinput1" placeholder="搜索"  maxlength="15"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 好友列表部分-->
        <div id="listplace1" style="display: block;">
            <div class="Section">
                <!-- 主列表-->
                <div class="Cell" id="aa">
                    <div id="jinghao" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!-- 搜索列表-->
                <div class="Cell" id="a1">
                    <div id="jinghao1" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!--右侧导航条-->
                <div class="rightnav1" style="display: block;">
                    <div id="jinghaobtn1"><a href="#">#</a></div>
                    <div class="zmbtn">A</div>
                    <div class="zmbtn">B</div>
                    <div class="zmbtn">C</div>
                    <div class="zmbtn">D</div>
                    <div class="zmbtn">E</div>
                    <div class="zmbtn">F</div>
                    <div class="zmbtn">G</div>
                    <div class="zmbtn">H</div>
                    <div class="zmbtn">I</div>
                    <div class="zmbtn">J</div>
                    <div class="zmbtn">K</div>
                    <div class="zmbtn">L</div>
                    <div class="zmbtn">M</div>
                    <div class="zmbtn">N</div>
                    <div class="zmbtn">O</div>
                    <div class="zmbtn">P</div>
                    <div class="zmbtn">Q</div>
                    <div class="zmbtn">R</div>
                    <div class="zmbtn">S</div>
                    <div class="zmbtn">T</div>
                    <div class="zmbtn">U</div>
                    <div class="zmbtn">V</div>
                    <div class="zmbtn">W</div>
                    <div class="zmbtn">X</div>
                    <div class="zmbtn">Y</div>
                    <div class="zmbtn">Z</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加群聊主题部分-->
<div class="PageWrapper nonav" id="allchattitlepage" style="display:none;margin-top:0;">
    <div class=" has_toolbar">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header" style="position: relative">
                <div class="header_main">
                    <button class="mweb_modal_back_button" id="titlegobackbtn"></button>
                    <div class="title page_title unified">
                        群聊主题
                    </div>
                    <div class="header_action_buttons cannotclick" style="height: 100%" id="titleok">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 输入框-->
        <div class="titleinputbox">
            <h1>群聊主题</h1>
            <div>
                <input type="text" id="titleinput"/>
            </div>
        </div>

    </div>
</div>
<!--创建群组成功提示等待区域-->
<div id="waitplace" style="display:none">
    <div style="margin-top:0;">
        <div class="lf">
            <img src="img/aoy.png"/>
        </div>
        <div class="lf">
            正在发起群聊...
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="ftnjs/ctoe.js"></script>
<script src="ftnjs/urlnote.js"></script>
<script src="js/tohref.js"></script>
<!--环信-->
<script type="text/javascript" src="sdk/webim.config.js"></script>
<script src="sdk/strophe-1.2.8.min.js"></script>
<script src="sdk/websdk-1.1.22.js"></script>
<script src="http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js"></script>
<!--js-->
<script src="js/createallchat.js"></script>
</body>
</html>